<template>
  <div>
    <a-button type="primary" @click="showDrawer">
      <a-icon type="plus"/>
      New account
    </a-button>
    <a-drawer
        title="Create a new account"
        :width="720"
        :visible="visible"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
    >
      <a-form :form="form" layout="vertical" hide-required-mark @submit="handleSubmit">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="Name">
              <a-input
                  v-decorator="[
                  'name',
                  {
                    rules: [{ required: true, message: '请输入病人姓名' }],
                  },
                ]"
                  placeholder="请输入医生姓名"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="年龄">
              <a-input-number
                  v-decorator="[
                  'age',
                  {
                    rules: [{ required: true, message: '请输入病人正确年龄' }],
                  },
                ]"
                  style="width: 100%"
                  placeholder="请输入病人正确年龄"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <!-- TODO:签约医生，待完善-->
          <!--
          <a-col :span="12">
            <a-form-item label="Owner">
              <a-select
                  v-decorator="[
                  'owner',
                  {
                    rules: [{ required: true, message: 'Please select an owner' }],
                  },
                ]"
                  placeholder="Please a-s an owner"
              >
                <a-select-option value="xiao">
                  Xiaoxiao Fu
                </a-select-option>
                <a-select-option value="mao">
                  Maomao Zhou
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          -->
          <a-col :span="12">
            <a-form-item label="联系方式">
              <a-input
                  v-decorator="[
                  'phone',
                  {
                    rules: [{ required: false, message: '请输入你的联系方式' }],
                  },
                ]"
                  placeholder="请输入你的联系方式"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="性别">
              <a-select
                  v-decorator="[
                  'gender',
                  {
                    rules: [{ required: true, message: 'Please choose the gender' }],
                  },
                ]"
                  placeholder="请选择病人性别"
              >
                <a-select-option value="1">
                  男
                </a-select-option>
                <a-select-option value="2">
                  女
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="家庭住址">
              <a-input
                  v-decorator="[
                  'address',
                  {
                    rules: [{ required: false, message: '情输入你的家庭住址' }],
                  },
                ]"
                  placeholder="请输入你的家庭住址"
              >
              </a-input>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="签约日期">
              <a-date-picker
                  v-decorator="[
                  'signDate',
                  {
                    rules: [{ required: true, message: 'Please choose the signDate' }],
                  },
                ]"
                  style="width: 100%"
                  :get-popup-container="trigger => trigger.parentNode"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item v-bind="formItemLayout" label="Website">
              <a-auto-complete
                  v-decorator="['email', { rules: [{ required: true, message: 'Please input email!' }] }]"
                  placeholder="email"
                  @change="handleWebsiteChange"
              >
                <template slot="dataSource">
                  <a-select-option v-for="email in autoCompleteResult" :key="email">
                    {{ email }}
                  </a-select-option>
                </template>
                <a-input />
              </a-auto-complete>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="Description">
              <a-textarea
                  v-decorator="[
                  'description',
                  {
                    rules: [{ required: false, message: 'Please enter url description' }],
                  },
                ]"
                  :rows="4"
                  placeholder="please enter url description"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <div
            :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="onClose">
            Cancel
          </a-button>
          <a-button type="primary" @click="onClose()" html-type="submit">
            Submit
          </a-button>
        </div>
      </a-form>

    </a-drawer>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Drawer",
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      //头像相关数据
      loading: false,
      imageUrl: '',
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      autoCompleteResult: [],
    };
  },
  methods: {
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    //TODO:不能同步更新数据
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form', values)

          axios(
              {
                url: '/api/adminDoctor/add',
                method: 'post',
                data: values
              }
          ).then(res => {
            this.$message.success('添加成功')
            this.$store.state.sign++;
            console.log(res)
            console.log(this.$store.state.sign)
          })
        }
      })
    },
    //电子邮箱相关方法
    handleWebsiteChange(value) {
      let autoCompleteResult;
      if (!value) {
        autoCompleteResult = [];
      } else {
        autoCompleteResult = ['@qq.com', '@163.com', '@gmail.com'].map(domain => `${value}${domain}`);
      }
      this.autoCompleteResult = autoCompleteResult;
    },
  },
};

</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>